import { hashpath_helper } from "../helper/hashpath.mjs";
import { thin } from "../thin3.mjs";
import { after } from "./delay_render.mjs";
import render_helper from "./render_helper.mjs";
import thin_render from "./thin_render.mjs";

/**
 * 多视图模板渲染函数
 * 用于创建和管理具有标签页切换功能的多视图界面
 * @param {Object} params - 参数对象
 * @param {HTMLElement} params.container - 容器元素，用于挂载多视图组件
 * @param {Object} params.template - 模板配置对象，包含视图高度、样式和多视图配置
 */
export function multiview_template({ container, template }) {
  // 创建多视图容器元素，用于包含标签页和视图内容
  const template_container = document.createElement("multiview");
  container.appendChild(template_container);

  // 创建标签页容器，用于显示可切换的标签
  const tab = document.createElement("tab");
  template_container.appendChild(tab);

  // 创建视图容器，用于显示当前选中的视图内容
  const view = document.createElement("view");
  template_container.appendChild(view);

  // 延迟渲染视图容器，设置高度和样式
  // 使用after确保DOM元素已完全创建
  after(() =>
    render_helper(view, { height: template.height, style: template.style })
  );

  // 获取父级hash路径，用于构建完整的路由路径
  let p_hash = hashpath_helper.parent_hash(container);

  console.log({ p_hash });

  // 遍历模板配置中的多视图配置，为每个视图创建对应的标签页
  Object.entries(template.multiview).forEach(([key, value], index) => {
    let matchs, hash;

    // 如果存在父级hash，则构建完整的hash路径
    if (p_hash) {
      hash = hashpath_helper.join(p_hash, key);
      let reg = new RegExp("^".concat(hash, "(/|$)"));
      matchs = document.location.hash.match(reg);
    }

    // 渲染标签页，设置点击事件和激活状态
    thin_render(tab, {
      a: key,
      // 设置标签页激活状态：
      // 1. 如果有父级hash且当前hash匹配，则激活
      // 2. 如果没有父级hash且是第一个标签页，则激活
      class:
        p_hash && matchs
          ? "active"
          : !p_hash && index === 0
          ? "active"
          : undefined,
      click: (e) => {
        // 点击事件处理：
        // 1. 移除所有标签页的激活状态
        // 2. 为当前点击的标签页添加激活状态
        // 3. 清空视图容器
        // 4. 更新hash路径
        // 5. 渲染对应的视图内容
        thin("a", tab).removeClass("active");
        thin(e.sender).addClass("active");
        thin("view", template_container).empty();
        console.log({ key, value });
        if (hash) {
          template_container.thin_hashpath = hash;
          history.pushState(null, null, hash);
        }
        thin_render(view, value);
      },
    });

    // 根据hash路径或默认规则渲染视图内容
    if (p_hash && matchs) {
      // 如果hash匹配，渲染对应的视图
      console.log({ matchs });
      template_container.thin_hashpath = hash;
      thin_render(view, value);
    } else if (p_hash && p_hash === location.hash && index === 0) {
      // 如果hash匹配，渲染对应的视图
      let new_hash = hashpath_helper.join(p_hash, key);
      template_container.thin_hashpath = new_hash;
      history.pushState(null, null, new_hash);
      thin_render(view, value);
    } else if (!p_hash && index === 0) {
      // 如果是第一个视图且没有匹配的hash，则默认渲染
      thin_render(view, value);
    }
  });
}
